<template>
  <el-card>
    <div>
      <p>test</p>
      <p>query: {{ $route.query }}</p>
      <p>state: {{ $store.state.app.routeState }}</p>
      <el-button @click="jump">jump</el-button>
      <el-button @click="jump500">500</el-button>
      <el-button @click="closeThisTag">Close This Tag</el-button>
      <el-button @click="editHtml">在线编辑HTML</el-button>
      <el-button @click="sm3">测试国密SM3</el-button>
      <el-button @click="editBpmn">测试流程设计</el-button>
    </div>
    <el-dialog v-model="contentView" title="文章内容" fullscreen>
      <tiny-mce v-model="htmlContent" />
    </el-dialog>
    <el-dialog v-model="bpmnView" title="流程图" fullscreen>
      <camunda-bpmn ref="bpmn" v-model="bpmnContent" :format="true" @save="handleBpmnChange" />
    </el-dialog>
  </el-card>
</template>
<script>
import TinyMce from '@/plugins/tiny-mce'
import CamundaBpmn from '@/plugins/camunda-bpmn'
import { SM3 } from 'gm-crypto'
import { nextTick, ref } from 'vue'

export default {
  name: 'demo3',
  components: {
    TinyMce,
    CamundaBpmn
  },
  data() {
    return {
      htmlContent: '',
      bpmnContent: '',
      contentView: false,
      bpmnView: false
    }
  },
  methods: {
    jump() {
      this.$api.turnToPage({
        name: 'demo3',
        query: { name: 'demo33333' },
        state: { level1: '1', level2: { level3: '3' } }
      })
    },
    jump500() {
      this.$api.redirectE500('test 500')
    },
    closeThisTag() {
      this.$api.closeThisTagImmediately()
    },
    editHtml() {
      this.contentView = true
    },
    sm3() {
      const plainText = '你好：hello world'
      const encryptedData = SM3.digest(plainText, 'utf8', 'hex')
      this.$alert(
        '待加密字符串“你好：hello world”，加密后的值：' + encryptedData,
        this.$i18n.t('dialog.info') + ''
      )
    },
    editBpmn() {
      this.bpmnView = true
      nextTick(() => {
        this.bpmn.doInitBpmn()
      })
    },
    handleBpmnChange(bpmn) {
      console.log('bpmn changed: ')
      console.log(bpmn)
      this.bpmnContent = bpmn
      this.bpmnView = false
    }
  },
  watch: {
    htmlContent(html) {
      console.log('watch html changed: ')
      console.log(html)
    }
  },
  setup() {
    const bpmn = ref(null)
    return { bpmn }
  }
}
</script>
